<template>
  <view class="drug-detail-container">
    <!-- 仅供参考提示 -->
    <view class="notice-banner">
      <text>本模块知识仅供参考，如有需要，请在医生指导下使用</text>
    </view>
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">
        <uni-icons type="left" size="20" color="#333"></uni-icons>
      </view>
      <text class="header-title">药品详情</text>
      <view class="placeholder"></view>
    </view>
    
    <!-- 药品详情内容 -->
    <view v-if="loading" class="loading-container">
      <text>加载中...</text>
    </view>
    
    <view v-else-if="drugDetail" class="drug-content">
      <!-- 药品基本信息 -->
      <view class="drug-basic">
        <view class="drug-image">
          <image :src="basic.image" mode="aspectFit"></image>
        </view>
        <view class="drug-info">
          <text class="drug-name">{{ basic.name }}</text>
          <text v-if="basic.price" class="drug-price">¥{{ basic.price }}</text>
          <text v-if="basic.spec" class="drug-spec">{{ basic.spec }}</text>
        </view>
      </view>
      
      <!-- 药品详细信息 -->
      <view class="drug-details">
        <view v-for="(sec, idx) in sections" :key="idx" class="detail-section">
          <uni-section :title="sec.title" type="line">
            <text class="detail-text">{{ sec.content || '暂无信息' }}</text>
          </uni-section>
        </view>
      </view>
    </view>
    
    <view v-else class="error-container">
      <text>获取药品详情失败</text>
    </view>
  </view>
</template>

<script>
import { getDrugById } from '@/api/drug'

export default {
  data() {
    return {
      drugId: '',
      drugDetail: null,
      loading: false
    }
  },
  onLoad(options) {
    if (options && options.id) {
      this.drugId = options.id
      this.loadDrugDetail()
    } else {
      this.$modal.msg('无效的药品ID')
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    loadDrugDetail() {
      this.loading = true
      
      getDrugById(this.drugId).then(response => {
        this.loading = false
        
        // 根据API返回格式，药品详情可能在data或rows字段中
        if (response && response.code === 200) {
          // 尝试从不同可能的字段中获取药品详情
          if (response.data) {
            this.drugDetail = response.data
          } else if (response.rows && response.rows.length > 0) {
            this.drugDetail = response.rows[0]
          } else {
            console.error('获取药品详情失败：数据为空')
            this.$modal.msg('获取药品详情失败：数据为空')
          }
        } else {
          console.error('获取药品详情失败:', response ? response.msg : '响应为空')
          this.$modal.msg('获取药品详情失败：' + (response ? response.msg : '未知错误'))
        }
      }).catch(error => {
        this.loading = false
        console.error('获取药品详情失败:', error)
        this.$modal.msg('获取药品详情失败：网络异常')
      })
    }
  },
  computed: {
    // 归一化基础信息，兼容不同字段命名
    basic() {
      const d = this.drugDetail || {}
      return {
        name: d.drugName || d.name || d.title || '',
        image: d.drugImage || d.imageUrl || d.cover || '',
        price: d.price || d.salePrice || d.marketPrice || '',
        spec: d.packagingSpec || d.spec || d.packaging || ''
      }
    },
    // 明细段落，按常见药品说明书结构展示
    sections() {
      const d = this.drugDetail || {}
      const pick = (...keys) => {
        for (const k of keys) {
          if (d && d[k]) return d[k]
        }
        return ''
      }
      return [
        { title: '药品成分', content: pick('ingredients', 'composition', 'components') },
        { title: '用药禁忌', content: pick('contraindications', 'taboo') },
        { title: '功能主治', content: pick('functions', 'indications', 'efficacy') },
        { title: '用法用量', content: pick('usageDosage', 'dosage', 'usage') },
        { title: '药品性状', content: pick('drugTrait', 'characteristics', 'trait') },
        { title: '包装规格', content: pick('packagingSpec', 'packaging', 'spec') },
        { title: '不良反应', content: pick('adverseReaction', 'sideEffects', 'adverseEffects') },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.drug-detail-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.notice-banner {
  background: #e74c3c;
  color: #fff;
  font-size: 24rpx;
  padding: 12rpx 24rpx;
  text-align: center;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .back-btn {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
  }
  
  .placeholder {
    width: 60rpx;
  }
}

.loading-container,
.error-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 500rpx;
  color: #999;
  font-size: 28rpx;
}

.drug-content {
  padding: 20rpx;
}

.drug-basic {
  display: flex;
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  
  .drug-image {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
    
    image {
      width: 100%;
      height: 100%;
      border-radius: 12rpx;
    }
  }
  
  .drug-info {
    flex: 1;
    
    .drug-name {
      display: block;
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
      margin-bottom: 10rpx;
    }
    
    .drug-price {
      display: block;
      font-size: 32rpx;
      color: #e64340;
      margin-bottom: 10rpx;
    }
    
    .drug-spec {
      display: block;
      font-size: 26rpx;
      color: #999;
    }
  }
}

.drug-details {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx 0;
  
  .detail-text {
    font-size: 28rpx;
    color: #333;
    line-height: 1.6;
    padding: 0 30rpx 20rpx 30rpx;
    display: block;
  }
}
</style>